<template>
  <view class="container">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">

      </view>
      <view class="topitem">
        <view style="width: 20%;position: relative;">
          <image src="../../static/message/add.png" mode="" style="width: 44rpx;height: 44rpx;" @click="show2 = !show2">
          </image>
          <view class="addfriend" v-show="show2 == true">
            <view class="afone">
              建立群聊
            </view>
            <view class="aftwo" @click="toaddfriend()">
              添加好友
            </view>
          </view>
        </view>
        <view class="toptit">
          消息
        </view>
        <view @click="tochatsearch()" style="width: 20%;text-align: right;">
          <image src="../../static/message/Vector.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 180rpx;">

    </view>
    <!-- 内容 -->
    <view class="content" @click="show2=false">
      <!-- 聊天1 -->
      <view class="messitem1" @click="toon()">
        <view style="width: 100rpx;">
          <image src="../../static/message/green_message.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
        </view>
        <view class="item1text">
          <view class="item1name">
            官方通告
          </view>
          <view class="item1cont">
            [35条]官方消息发布平台已更新，增加
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            08:23
          </view>
          <view class="timeimg">
            <image src="../../static/message/donotdisturb.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 聊天1 -->

      <!-- 聊天2 -->
      <view class="messitem1">
        <view style="width: 100rpx;">
          <image src="../../static/message/red_hand.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
        </view>
        <view class="item1text">
          <view class="item1name">
            帮忙消息
          </view>
          <view class="item1cont">
            <span style="color: #FF2A31;">[已发送]</span>官方消息发布平台已更新，增加
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            08:23
          </view>
          <view class="timeimg">
            <image src="../../static/message/donotdisturb.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 聊天2 -->

      <!-- 聊天3 -->
      <view class="messitem1">
        <view class="item1right">
          <image src="../../static/message/blue_help.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <!-- <view class="man">
            <image src="../../static/message/man.png" mode="" style="width: 70%;height: 70%;"></image>
          </view> -->
          <view class="badge">
            <u-badge type="success" :type="type" :value="value1" shape="circle"></u-badge>
          </view>
        </view>
        <view class="item1text">
          <view class="item1name">
            求助消息
          </view>
          <view class="item1cont">
            <span style="color: #FF2A31;">[已同意]</span>我是一名山区的支教教师,这边
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            08:23
          </view>
          <view class="timeimg">
            <image src="../../static/message/lingdang.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 聊天3 -->

      <!-- 聊天4 -->
      <view :style="show == false?'background-color:#FAFAFA':'background-color:#E5E5E5'" class="messitem1"
        @longpress="langtop()" @click="closelangtop()">
        <!-- 聊天置顶 -->
        <view class="top" v-show="show">
          <view class="top1">
            置顶该聊天
          </view>
          <view class="top2">
            取消置顶
          </view>
        </view>
        <!-- 聊天置顶 -->
        <view class="item1right">
          <image src="../../static/message/user_one.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <view class="man">
            <image src="../../static/message/man.png" mode="" style="width: 65%;height: 65%;"></image>
          </view>
          <view class="badge">
            <u-badge type="success" :type="type" :value="value" shape="circle"></u-badge>
          </view>
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            隔壁老王
          </view>
          <view class="item1cont">
            <span style="color: #FF2A31;">[语音]</span>
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            08:23
          </view>
          <!-- <view class="timeimg">
            <image src="../../static/message/lingdang.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
          </view> -->
        </view>
      </view>
      <!-- 聊天4 -->

      <!-- 聊天5 -->
      <view class="messitem1" @click="togroupchat()">
        <view class="item1right">
          <image src="../../static/message/nine_friend.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <!-- <view class="man">
            <image src="../../static/message/man.png" mode="" style="width: 70%;height: 70%;"></image>
          </view> -->
          <view class="badge" style="right: -7rpx;top: -8rpx;">
            <u-badge type="success" :isDot="true" :type="type" :value="value" shape="circle"></u-badge>
          </view>
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            拼夕夕互助点赞万人群
          </view>
          <view class="item1cont">
            <!-- <span style="color: #FF2A31;">[语音]</span> -->
            [999条+]我是一名山区的支教老师,这边
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            08:23
          </view>
          <view class="timeimg">
            <image src="../../static/message/donotdisturb.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 聊天5 -->

      <!-- 聊天6 -->
      <view class="messitem1">
        <view class="item1right">
          <image src="../../static/message/nine_friend.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <!-- <view class="man">
            <image src="../../static/message/man.png" mode="" style="width: 70%;height: 70%;"></image>
          </view> -->
          <view class="badge" style="right: -7rpx;top: -8rpx;">
            <u-badge type="success" :isDot="true" :type="type" :value="value" shape="circle"></u-badge>
          </view>
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            这是个4人小分队
          </view>
          <view class="item1cont">
            <!-- <span style="color: #FF2A31;">[语音]</span> -->
            [38条]我们这是个4人小组,分头行动...
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            08:23
          </view>
          <view class="timeimg">
            <image src="../../static/message/donotdisturb.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 聊天6 -->

      <!-- 聊天7 -->
      <view class="messitem1" @click="tochatinterface()">
        <view class="item1right">
          <image src="../../static/message/user_three.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <view class="man" style="background-color: #FF4D94;">
            <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
          </view>
          <!-- <view class="badge">
            <u-badge type="success" :type="type" :value="value" shape="circle"></u-badge>
          </view> -->
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            隔壁小美
          </view>
          <view class="item1cont">
            <span>[语音]</span>
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            昨天
          </view>
          <!-- <view class="timeimg">
            <image src="../../static/message/lingdang.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
          </view> -->
        </view>
      </view>
      <!-- 聊天7 -->

      <!-- 聊天8 -->
      <view class="messitem1">
        <view class="item1right">
          <image src="../../static/message/user_four.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <view class="man">
            <image src="../../static/message/man.png" mode="" style="width: 65%;height: 68%;"></image>
          </view>
          <!-- <view class="badge">
            <u-badge type="success" :type="type" :value="value" shape="circle"></u-badge>
          </view> -->
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            用户名字视频已读
          </view>
          <view class="item1cont">
            <span>[语音]</span>
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            昨天
          </view>
          <!-- <view class="timeimg">
            <image src="../../static/message/lingdang.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
          </view> -->
        </view>
      </view>
      <!-- 聊天8 -->

      <!-- 聊天9 -->
      <view class="messitem1">
        <view class="item1right">
          <image src="../../static/message/user_five.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <view class="man" style="background-color: #FF4D94;">
            <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
          </view>
          <!-- <view class="badge">
            <u-badge type="success" :type="type" :value="value" shape="circle"></u-badge>
          </view> -->
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            用户名字视频已读
          </view>
          <view class="item1cont">
            <span style="color: #FF3C42;">[转账]</span>
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            22/8/11
          </view>
          <!-- <view class="timeimg">
            <image src="../../static/message/lingdang.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
          </view> -->
        </view>
      </view>
      <!-- 聊天9 -->

      <!-- 聊天9 -->
      <view class="messitem1">
        <view class="item1right">
          <image src="../../static/message/user_five.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
          <view class="man" style="background-color: #FF4D94;">
            <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
          </view>
          <!-- <view class="badge">
            <u-badge type="success" :type="type" :value="value" shape="circle"></u-badge>
          </view> -->
        </view>
        <view class="item1text">
          <view class="item1name" style="color: #343434;">
            用户名字视频已读
          </view>
          <view class="item1cont">
            <span>[语音]</span>
          </view>
        </view>
        <view class="item1time">
          <view class="time">
            22/8/11
          </view>
          <!-- <view class="timeimg">
            <image src="../../static/message/lingdang.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
          </view> -->
        </view>
      </view>
      <!-- 聊天9 -->
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        href: 'https://uniapp.dcloud.io/component/README?id=uniui',
        type: 'error',
        value: '28',
        value1: "99+",
        show: false,
        show2: false
      }
    },
    methods: {
      toon() {
        uni.navigateTo({
          url: "/pages/message/officialNotice"
        })
      },
      togroupchat() {
        uni.navigateTo({
          url: "/pages/message/groupChat"
        })
      },
      tochatsearch() {
        uni.navigateTo({
          url: "/pages/message/chatSearch"
        })
      },
      tochatinterface() {
        uni.navigateTo({
          url: "/pages/message/chatInterface"
        })
      },
      toaddfriend() {
        uni.navigateTo({
          url: "/pages/message/addFriend"
        })
      },
      langtop() {
        this.show = true
      },
      closelangtop() {
        this.show = false
      }
    }
  }
</script>

<style lang="scss">
  .container {
    width: 100vw;


    // 头部
    .topbox {
      width: 100vw;
      background-color: white;
      position: fixed;
      z-index: 99;

      .top-top {
        width: 100%;
        height: var(--status-bar-height);
      }

      .topitem {
        border-bottom: solid 2rpx #E5E5E5;
        width: 100%;
        height: 100rpx;
        background-color: white;
        display: flex;
        padding: 23rpx 50rpx;
        box-sizing: border-box;

        .addfriend {
          position: absolute;
          top: 50rpx;
          left: 0;
          background-color: #505050;
          width: 240rpx;
          height: 220rpx;
          border-radius: 20rpx;

          .afone {
            color: white;
            height: 50%;
            width: 100%;
            text-align: center;
            font-size: 30rpx;
            line-height: 120rpx;
            border-bottom: solid #F5F5F5 2rpx;
          }

          .aftwo {
            color: white;
            height: 50%;
            width: 100%;
            text-align: center;
            font-size: 30rpx;
            line-height: 120rpx;
          }
        }

        .toptit {
          width: 60%;
          text-align: center;
          font-size: 40rpx;
          font-weight: bold;
        }
      }
    }

    // 头部
    // 内容
    .content {
      width: 100vw;

      .messitem1 {
        width: 100%;
        height: 156rpx;
        background-color: #FAFAFA;
        padding: 30rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        position: relative;

        .top {
          z-index: 8;
          position: absolute;
          top: 80rpx;
          left: 350rpx;
          background-color: #F5F5F5;
          width: 260rpx;
          height: 172rpx;
          border-radius: 10rpx;


          .top1 {
            text-align: center;
            font-size: 32rpx;
            padding: 16rpx 50rpx;
            box-sizing: border-box;
            width: 100%;
            height: 50%;
            border-bottom: solid #E5E5E5 4rpx;
          }

          .top2 {
            text-align: center;
            font-size: 32rpx;
            padding: 16rpx 50rpx;
            box-sizing: border-box;
            width: 100%;
            height: 50%;

          }
        }

        .item1right {
          width: 14%;
          position: relative;

          .man {
            border-radius: 50%;
            position: absolute;
            bottom: -10rpx;
            left: -5rpx;
            box-sizing: border-box;
            text-align: center;
            line-height: 36rpx;
            width: 32rpx;
            height: 32rpx;
            background-color: #769AFF;
          }

          .badge {
            position: absolute;
            top: -10rpx;
            right: -15rpx;
          }
        }

        .item1text {
          width: 62%;
          padding-left: 20rpx;

          .item1name {
            font-size: 36rpx;
            font-weight: bold;
            color: #0799FA;
          }

          .item1cont {
            color: #A1A1A1;
            margin-top: 10rpx;
            width: 90%;
            /*强制文本在一行内显示*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

        }

        .item1time {
          width: 20%;
          text-align: right;
        }

        .timeimg {
          padding-right: 20rpx;
          padding-top: 20rpx;
        }

      }
    }

    // 内容
  }
</style>